<template>
  <div class="blog-container">
    <!-- 侧边栏 -->
    <aside class="blog-sidebar">
      <!-- 搜索框 -->
      <div class="sidebar-section">
        <h3>搜索文章</h3>
        <input
          v-model="filters.search"
          @input="handleSearch"
          placeholder="输入关键词搜索..."
          class="search-input"
          type="text"
        />
      </div>

      <!-- 标签筛选 -->
      <div class="sidebar-section">
        <h3>分类</h3>
        <div class="tags-list">
          <button
            v-for="tag in allTags"
            :key="tag"
            @click="toggleTag(tag)"
            :class="['tag-button', { active: filters.tag === tag }]"
          >
            {{ tag }}
          </button>
        </div>
        <button
          v-if="filters.tag"
          @click="clearTag"
          class="tag-button"
          style="margin-top: 0.5rem; background: #e53e3e; color: white; border-color: #e53e3e;"
        >
          清除筛选
        </button>
      </div>

      <!-- 统计信息 -->
      <div class="sidebar-section">
        <h3>博客统计</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-number">{{ stats.totalPosts }}</span>
            <span class="stat-label">总文章数</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ stats.totalTags }}</span>
            <span class="stat-label">标签数量</span>
          </div>
        </div>
        <div v-if="stats.latestPost" style="margin-top: 1rem; padding: 0.75rem; background: #f7fafc; border-radius: 8px; border: 1px solid #e2e8f0;">
          <div style="font-size: 0.8rem; color: #718096; margin-bottom: 0.5rem;">最新文章</div>
          <div style="font-weight: 500; color: #2d3748; font-size: 0.9rem;">{{ stats.latestPost.title }}</div>
          <div style="font-size: 0.75rem; color: #a0aec0;">{{ formatDate(stats.latestPost.date) }}</div>
        </div>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="blog-main">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div style="text-align: center; padding: 3rem; color: #718096;">
          <div style="font-size: 2rem; margin-bottom: 1rem;">📚</div>
          <div>正在加载文章...</div>
        </div>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="error-state">
        <div style="text-align: center; padding: 3rem; color: #e53e3e;">
          <div style="font-size: 2rem; margin-bottom: 1rem;">❌</div>
          <div>{{ error }}</div>
          <button
            @click="loadPosts"
            style="margin-top: 1rem; padding: 0.5rem 1rem; background: #e53e3e; color: white; border: none; border-radius: 6px; cursor: pointer;"
          >
            重试
          </button>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="filteredPosts.length === 0" class="empty-state">
        <div style="text-align: center; padding: 3rem; color: #718096;">
          <div style="font-size: 2rem; margin-bottom: 1rem;">🔍</div>
          <div>没有找到匹配的文章</div>
          <button
            v-if="filters.tag || filters.search"
            @click="clearFilters"
            style="margin-top: 1rem; padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 6px; cursor: pointer;"
          >
            清除筛选
          </button>
        </div>
      </div>

      <!-- 文章列表 -->
      <div v-else class="posts-grid">
        <article
          v-for="post in filteredPosts"
          :key="post.id"
          @click="viewPost(post)"
          class="post-card"
        >
          <div class="post-header">
            <h3 class="post-title">{{ post.title }}</h3>
            <div class="post-date">{{ formatDate(post.date) }}</div>
          </div>
          
          <p class="post-summary">{{ post.summary }}</p>
          
          <div class="post-tags">
            <span
              v-for="tag in post.tags"
              :key="tag"
              class="post-tag"
            >
              {{ tag }}
            </span>
          </div>

        </article>
      </div>
    </main>

    <!-- 文章详情模态框 -->
    <div v-if="showDetail && selectedPost" class="post-modal" @click.self="closeDetail">
      <div class="modal-content">
        <button @click="closeDetail" class="close-button">×</button>
        
        <div class="post-header" style="margin-bottom: 2rem;">
          <h2 class="post-title">{{ selectedPost.title }}</h2>
          <div class="post-date">{{ formatDate(selectedPost.date) }}</div>
        </div>
        
        <div class="post-tags" style="margin-bottom: 1.5rem;">
          <span
            v-for="tag in selectedPost.tags"
            :key="tag"
            class="post-tag"
          >
            {{ tag }}
          </span>
        </div>
        
        <div style="margin-bottom: 1.5rem; color: #718096; font-size: 0.9rem;">
          作者: {{ selectedPost.author }}
        </div>
        
        <div class="post-content" v-html="selectedPost.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBlog } from '@/scripts/components/useBlog'
import { debounce } from 'lodash-es'

const {
  loading,
  error,
  filters,
  filteredPosts,
  stats,
  allTags,
  selectedPost,
  showDetail,
  loadPosts,
  setFilter,
  clearFilters,
  viewPost,
  closeDetail
} = useBlog()

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 切换标签筛选
const toggleTag = (tag: string) => {
  setFilter({ tag: filters.value.tag === tag ? undefined : tag })
}

// 清除标签筛选
const clearTag = () => {
  setFilter({ tag: undefined })
}

// 防抖搜索
const handleSearch = debounce(() => {
  // 搜索逻辑已经在 computed 中处理
}, 300)
</script>

<style scoped>
@import '@/styles/components/BlogView.css';
</style>

<style>
/* 全局样式，用于 Markdown 内容 */
.post-content h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
  color: #2d3748;
}

.post-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem 0;
  color: #2d3748;
}

.post-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.25rem 0 0.75rem 0;
  color: #2d3748;
}

.post-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
  color: #4a5568;
}

.post-content ul,
.post-content ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.post-content li {
  margin-bottom: 0.5rem;
}

.post-content blockquote {
  border-left: 4px solid #667eea;
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: #718096;
  font-style: italic;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.post-content th,
.post-content td {
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.post-content th {
  background: #f7fafc;
  font-weight: 600;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}

.post-content a {
  color: #667eea;
  text-decoration: none;
}

.post-content a:hover {
  text-decoration: underline;
}
</style>